<template>
  <view class="app-container" style="background-color: white;">
    <!-- 顶部导航 -->
    <view style="display: flex; justify-content: space-around; margin-bottom: 20rpx; align-items: center;">
      <!-- 预约服务 -->
      <view style="width: 90rpx; height: 90rpx;background-color: #3180E6; border: 1rpx solid #000; border-radius: 50%; display: flex; justify-content: center; align-items: center;">
        <text style="text-align: center; white-space: pre-wrap;">预约服务</text>
      </view>
      <!-- 支付订单 -->
      <view style="width: 90rpx;background-color: #10D59B; height: 90rpx; border: 1rpx solid #000; border-radius: 50%; display: flex; justify-content: center; align-items: center;">
        <text style="text-align: center; white-space: pre-wrap;">支付订单</text>
      </view>
      <!-- 门店服务 -->
      <view style="width: 90rpx;background-color:#FC7853; height: 90rpx; border: 1rpx solid #000; border-radius: 50%; display: flex; justify-content: center; align-items: center;">
        <text style="text-align: center; white-space: pre-wrap;">门店服务</text>
      </view>
    </view>

    <!-- 商家信息 -->
    <view style="padding: 20rpx; border-top: 1rpx solid rgba(0, 0, 0, 0.1); display: flex; align-items: center;">
      <image src="/static/商家@2x.png" style="width: 40rpx; height: 50rpx;"></image>
      <view style="margin-left: 20rpx;">
        <text style="font-size: 15px;  line-height: 30rpx;">伟业汽车美容店</text>
        <view style="margin-top: 5rpx;font-size: 10px;">山阳区人民路32号</view>
      </view>
    </view>

    <!-- 用户信息 -->
    <view style="display: flex; align-items: center;padding: 20rpx 20rpx;">
      <image src="/static/my.png" style="width: 50rpx; height: 50rpx;margin-right: 10rpx;"></image>
      <text>张先生</text>
      <view style="margin-left: 340rpx;">18895039309</view>
    </view>

    <!-- 车辆信息 -->
    <view style="padding: 20rpx;  display: flex; align-items: center;">
      <image src="/static/车辆-01@2x.png" style="width: 40rpx; height: 50rpx;"></image>
      <text style="margin-right: 440rpx;margin-left: 20rpx;">奔驰FWE4</text>
      <text style="font-size: 24px;">></text>
    </view>

    <!-- 服务产品 -->
    <view style="padding: 20rpx; border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);">
      <text style="font-weight: bold;margin-right: 300rpx;">服务产品</text>
      <text style="">共选择1项服务产品</text>
      <view style="display: flex;  align-items: center; margin-top: 10rpx;">
        <text>精选汽车</text>
        <text style="color: red; margin-left: 40rpx;">¥ 199</text>
      </view>
    </view>

    <!-- 优惠券 -->
    <view style="padding: 20rpx; display: flex; align-items: center; ">
      <image src="/static/优惠券@2x.png" style="width: 40rpx; height: 50rpx;"></image>
      <text>优惠卷/代金券</text>
      <text style="margin-left: 330rpx;color: red;">-10元</text>
      <text style="font-size: 24px;">></text>
    </view>

    <!-- 底部固定栏 -->
    <view style="position: fixed; bottom: 0; left: 0; right: 0;padding: 10rpx; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; background-color: white;">
      <view style="display: flex; flex-direction: column; align-items: center;">
        <image src="../../static/客服@2x.png" alt="客服图标" style="width: 40rpx; height: 40rpx; margin-bottom: 5rpx;" />
        <text>联系客户</text>
      </view>
      <view style="padding: 20rpx; display: flex; justify-content: center;">
        <text style="font-weight: bold;">合计: <text style="color: red;">¥ 30.50</text></text>
      </view>
      <!-- 提交订单/呼叫按钮 -->
      <view style="padding: 20rpx; display: flex; justify-content: flex-end;">
        <button 
          style="background-color: blue; color: white; border: none; border-radius: 50rpx; font-size: 25rpx; cursor: pointer;"
          @click="isPaid ? showCallPopup() : showPaymentPopup()"
        >
          {{ isPaid ? '呼叫' : '提交订单' }}
        </button>
      </view>
    </view>

    <!-- 支付密码弹窗 -->
    <view v-if="showPayment" class="payment-mask" @click.stop="closePaymentPopup"></view>
    <view v-if="showPayment" class="payment-popup">
      <view class="payment-header">
        <text class="close-btn" @click="closePaymentPopup">×</text>
        <text>请输入支付密码</text>
      </view>
      <view class="payment-body">
        <text>车辆服务平台</text>
        <text class="payment-amount">¥ 39.90</text>
      </view>
      <view class="payment-method">
        <view class="payment-type">
          <text>支付方式</text>
          <text class="payment-balance">零钱</text>
        </view>
        <view class="password-box">
          <view 
            v-for="(item, index) in 6" 
            :key="index"
            class="password-item"
            @click="showKeyboard"
          >
            <text v-if="passwordArray[index]" class="password-dot">●</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 数字键盘 -->
    <view v-if="showKeyboardFlag" class="keyboard">
      <view class="keyboard-row" v-for="row in keyboardNumbers" :key="row[0]">
        <view 
          v-for="num in row" 
          :key="num"
          class="keyboard-key"
          @click="handleKeyPress(num)"
        >
          {{ num }}
        </view>
      </view>
      <view class="keyboard-row">
        <view class="keyboard-key empty"></view>
        <view class="keyboard-key" @click="handleKeyPress('0')">0</view>
        <view class="keyboard-key delete" @click="handleDelete">
          <text class="delete-icon">←</text>
        </view>
      </view>
      <view class="keyboard-row">
        <view class="keyboard-key confirm" @click="handleConfirm">确定</view>
      </view>
    </view>

    <!-- 呼叫弹窗 -->
    <view v-if="showCall" class="payment-mask" @click="closeCallPopup"></view>
    <view v-if="showCall" class="call-popup">
      <view class="popup-item" style="border-bottom: 1rpx solid #eee;">
        1889302936
      </view>
      <view class="popup-item" style="border-bottom: 1rpx solid #eee;">
        呼叫
      </view>
      <view class="popup-buttons">
        <view class="popup-button" style="border-right: 1rpx solid #eee;" @click="closeCallPopup">
          取消
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Chongzhi",
  data() {
    return {
      showPayment: false,
      showKeyboardFlag: false,
      password: '',
      passwordArray: ['','','','','',''],
      keyboardNumbers: [
        ['1', '2', '3'],
        ['4', '5', '6'],
        ['7', '8', '9']
      ],
      isPaid: false,
      showCall: false,
    };
  },
  methods: {
    showPaymentPopup() {
      this.showPayment = true;
    },
    closePaymentPopup() {
      this.showPayment = false;
      this.showKeyboardFlag = false;
      this.password = '';
      this.passwordArray = ['','','','','',''];
    },
    showKeyboard() {
      this.showKeyboardFlag = true;
    },
    handleKeyPress(num) {
      if (this.password.length < 6) {
        this.password += num;
        this.passwordArray[this.password.length - 1] = num;
      }
    },
    handleDelete() {
      if (this.password.length > 0) {
        this.password = this.password.slice(0, -1);
        this.passwordArray[this.password.length] = '';
      }
    },
    handleConfirm() {
      if (this.password.length === 6) {
        this.handlePayment();
      } else {
        uni.showToast({
          title: '请输入6位密码',
          icon: 'none'
        });
      }
    },
    handlePayment() {
      uni.showLoading({
        title: '支付中...'
      });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        });
        this.isPaid = true;
        this.closePaymentPopup();
      }, 1000);
    },
    showCallPopup() {
      this.showCall = true;
    },
    closeCallPopup() {
      this.showCall = false;
    }
  }
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  padding-bottom: 60px;
}

.payment-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.payment-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background-color: #fff;
  z-index: 1000;
  border-radius: 20rpx;
  padding: 20rpx;
}

.payment-header {
  position: relative;
  text-align: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.close-btn {
  position: absolute;
  left: 30rpx;
  font-size: 40rpx;
  color: #999;
}

.payment-body {
  padding: 40rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.payment-amount {
  font-size: 48rpx;
  font-weight: bold;
}

.payment-method {
  padding: 20rpx 30rpx 40rpx;
}

.payment-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.payment-balance {
  color: #666;
  font-size: 28rpx;
}

.password-box {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}

.password-item {
  width: 90rpx;
  height: 90rpx;
  border: 1rpx solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  margin: 0 10rpx;
  cursor: pointer;
}

.password-dot {
  font-size: 30rpx;
  color: #000;
}

.keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  padding: 20rpx;
  border-top: 1rpx solid #ddd;
  z-index: 1001;
}

.keyboard-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.keyboard-key {
  width: 180rpx;
  height: 100rpx;
  background-color: #fff;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
  cursor: pointer;
}

.keyboard-key:active {
  background-color: #f0f0f0;
}

.empty {
  background-color: #f5f5f5;
  box-shadow: none;
}

.delete {
  background-color: #f5f5f5;
}

.delete-icon {
  font-size: 40rpx;
}

.confirm {
  width: 100%;
  background-color: #007AFF;
  color: #fff;
}

.confirm:active {
  background-color: #0056b3;
}

.call-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 1000;
  border-radius: 20rpx 20rpx 0 0;
}

.popup-item {
  padding: 30rpx;
  text-align: center;
  font-size: 32rpx;
}

.popup-buttons {
  display: flex;
  border-top: 1rpx solid #eee;
}

.popup-button {
  flex: 1;
  padding: 25rpx;
  text-align: center;
  font-size: 32rpx;
}
</style>